<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" href="../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jstree.min.js"></script>

		<style type="text/css">
			.menu {
				border: 1px solid #337ab7;
			}
			
			.sub-menu {
				border: none;
			}
			
			.menu li {
				cursor: pointer;
			}
			
			.menu>li {
				background: #337ab7;
				color: #FFFFFF;
			}
			
			td {
				width: 150px;
				height: 50px;
				border: solid;
			}
			
			button {
				width: 70px;
				height: 40px;
			}
		</style>
		<script type="text/javascript">
			jQuery(document).ready(function() {
				function kc_catalog(cos) { <!-- 定义了一个方法，处理每次传过来的课程数据 -->
					var course = cos; <!-- 创建变量来存储传递的值-->
					$("#frame").load("create_course.html .sub-htm", "", function() {
						var str = "创建";
						if(course != null) {
							str = "编辑";
							$("#kcid").val(course.id); <!-- 存储课程的ID-->
							$("#kc-name").val(course.name); <!--存储课程的名字 -->
							$("#kc-descript").val(course.descript); <!--存储课程的描述 -->
						}

						$("#path").html("<li><a href='#'>课程管理</a></li><li class='active'>" + str + "</li>");
						$("#save-course").click(function() { <!--点击存储按钮后提交表单数据 -->
							$.ajax({ <!-- ajax提交表单数据-->
								type: "post", <!--方法 -->
								url: "savecourse", <!--链接到存储课程方法-->
								data: $("#course").serialize(), <!--传的数据是表单，并且序列化 -->
								success: function(kc) { <!--传输成功后返回一个函数 kc是服务端返回的json数据 -->
									alert("成功！");
									if(course != null) return; <!--课程不为空，结束 -->
									<!--对比左边，课程为空，就创建相应的课程 -->
									$("#kcgl").append("<li kcid='" + kc.id + "' kcdp='" + kc.descript + "'>" + kc.name + "</li>");
									<!--给它加入样式 -->
									$("#kcgl").children("li").addClass("list-group-item").addClass("sub-menu");
								}
							});
						});
					});
				}

				function roles(r) {
					var role = r;
					$("#frame").load("role.html #js", "", function() {
						var str = "创建";
						if(role != null) {
							var str = "编辑";
							$("#jid").val(role.id);
							$("#jname").val(role.name);
						}
						$("#path").html("<li><a href='#'>角色管理</a></li><li class='active'>" + str + "</li>");
						$("#save-role").click(function() {
							$.ajax({
								type: "get",
								url: "saverole",
								data: $("#role").serialize(),
								success: function(js) {
									alert("添加角色成功！");
									if(role != null) return;
									$("#jsgl").append("<li jid='" + js.id + "'>" + js.name + "</li>");
									$("#jsgl").children("li").addClass("list-group-item").addClass("sub-menu");
								}
							});
						});
					});
				}
				$("#create-role").click(function() {
					alert("进行角色创建");
					roles();
				});
				$.get("getrole", "", function(data) {
					$.each(data, function(i, e) {
						$("#jsgl").append("<li jid='" + e.id + "'>" + e.name + "</li>");
						$("#jsgl").children("[jid='" + e.id + "']").click(function() {
							var re = e;
							roles(re);
						});
					});
					$("#jsgl").children("li").addClass("list-group-item").addClass("sub-menu");
				});

				$.get("getcourse", "", function(data) { <!-- 从getcourse方法获取课程数组，data为课程数组-->
					$.each(data, function(index, element) { <!-- 从数组中根据index取出单独的元素-->
						$("#kcgl").append("<li kcid='" + element.id + "' kcdp='" + element.descript + "'>" + element.name + "</li>");
						$("#nrfl").append("<li kcid='" + element.id + "' kcdp='" + element.descript + "'>" + element.name + "</li>");
						$("#spgl").append("<li kcid='" + element.id + "' kcdp='" + element.descript + "'>" + element.name + "</li>");

						<!--课程管理和内容分类每一个都加上一列，同时加上kcid属性（编程者自己添加），元素的描述，显示元素名字， -->
						$("#kcgl").children("[kcid='" + element.id + "']").click(function() {
							<!--课程管理标签下每一个子分支被点击到，把对应的课程传给kc_catalo（） 方法-->
							var ele = element;
							kc_catalog(ele);
						});
						$("#spgl").children("[kcid='" + element.id + "']").click(function() {
							var cid = $(this).attr("kcid");
							var cname = element.name;
							$("#frame").load("edit_video.html #video-show", "", function(data) {
								$("#sp").click(function() {
									alert("@@@@@@");
									$.ajax({
										type: "get",
										url: "getshow",
										success: function(data) {
											$.each(data, function(i, e) {
												var test2 = data;
												var s = "";
												s += "<tr>";
												s += "<td>" + e.id + "</td>" + "<td>" + e.name + "</td>" + "<td>" + e.descript + "</td>" + "<td>" + e.upload_time + "</td>" + "<td>" + e.path + "</td>";
												s += "<td>" + "<button id=edit" + e.id + ">" + "修改" + "</button>" + "<button id=delete" + e.id + ">" + "删除" + "</button>" + "</td>"
												s += "</tr>";
												$("#add-show").append(s);
												$("#delete" + e.id).click(function() {
													alert("####");
													$.ajax({
														type: "get",
														url: "deletevideo",
														data: "id=" + e.id,
														success: function() {
															alert("删除成功！");
														}
													});
												});

												$("#edit" + e.id).click(function() {
													alert("%%%%%");
													$("#frame").load("edit-sp.html #spxg", "", function() {
														$("#id").val(e.id);
														$("#name").val(e.name);
														$("#descript").val(e.descript);
														$("#yes").click(function() {
															$.ajax({
																type: "get",
																url: "editvideo",
																data: $("#fev").serialize(),
																success: function() {
																	alert("修改成功！");
																}
															});
														});

													});
												});
											});
										}
									});
								});
							});

						});

						$("#nrfl").children("[kcid='" + element.id + "']").click(function() {
							<!--内容分类的每一个子标签被点击到 -->
							var cid = $(this).attr("kcid");
							<!--取出kcid属性 -->
							var cname = element.name;
							<!--取出元素的名字 -->
							$("#frame").load("contenttype.html #ctype", "", function() {
								$("#hom").text("内容分类");
								$("#cid").val(cid);
								<!-- id为cid的框赋值cid-->
								$("#lib").text(cname);
								<!-- id为lib的框赋值名字-->
								$("#tree").bind("select_node.jstree", function(event, data) {
									<!-- 选中tree的节点上的值的方法-->
									var obj = data;
									$("#id").val(obj.node.id);
									<!-- id为id的框赋值上一级课程（当前节点）的id-->
									$("#currentid").val(obj.node.id);
									$("#division").val(obj.node.text);
									<!-- id为divis赋值上一节课程（当前节点）的名字-->
									if(obj.node.parent != '#')
										$("#parentid").val(obj.node.parent);
									<!-- 若当前节点有parentid，则给id为parentid的框赋值-->
									$("#parentid1").val(obj.node.id);
									<!-- id为parentid1赋值当前节点的id-->
									var xxx = $("#id").val();
									$.post("getDescript", {
										catalogid: xxx
									}, function(data) {
										$("#descript").val(data);
										<!-- 给id为descript的框赋值-->
									});	
								});
								
								$("#tree").jstree({
									<!--生成jstree -->
									"core": {
										"data": {
											"url": "getCTree/" + cid,
											"data": function(n) {
												return {
													id: n.attr ? n.attr("id") : 0
												};
											}
										}
									},
									"plugins": ["themes", "json_data"]
								});
								
								$("#save_modi").click(function() {
									alert("进行修改");
									$.ajax({
										type: "post",
										url: "saveCatalog",
										data: $("#form1").serialize(),
										success: function() {
											window.location.reload();
										}
									});
								});
								$("#confirm").click(function() {
									$("#cid1").val($("#cid").val());
									alert("添加成功！");
									$.ajax({
										type: "post",
										url: "saveCatalog",
										data: $("#submitupdate").serialize(),
										success: function() {
											window.location.reload();
										}
									});
								});

								$("#confirm1").click(function() {
									$.ajax({
										type: "post",
										url: "deleteCatalog",
										data: $("#form1").serialize(),
										success: function() {
											window.location.reload();
										}
									});
								});

								var xx = document.getElementById("#upfile");
								$("#upfile").change(function() {
									var vfile = this.files[0];
									var url = URL.createObjectURL(vfile);
									$("#vplay").attr("src", url);
									$("#vplay")[0].load();
								});
								$("#dg").click(function() {
									var video = $("#vplay")[0];
									var ctx = $("#cv")[0].getContext("2d");
									ctx.drawImage(video, 0, 0, 200, 200);
									$(document.body).append(ctx);
									var cv = $("#cv")[0];
									$("#img").val(cv.toDataURL("image/png"));
								});

							});

						});
					});
					$("#kcgl").children("li").addClass("list-group-item").addClass("sub-menu");
					$("#nrfl").children("li").addClass("list-group-item").addClass("sub-menu");
					$("#spgl").children("li").addClass("list-group-item").addClass("sub-menu");
					<!-- 添加分支-->
				});

				$("#create-course").click(function() {
					kc_catalog();
					<!-- 点击之后弹出-->
				});
				$("#xsda").click(function() {
					$("#frame").load("studentmanage.html #student-manage-window", function() {
						$("#student-show").click(function() {
							$.ajax({
								type: "get",
								url: "getUserinformation",
								success: function(data) {
									$.each(data, function(index, element) {
										var test2 = data;
										var s = "";
										s += "<tr>";
										s += "<td>" + element.id + "</td>" + "<td>" + element.name + "</td>" + "<td>" + element.password + "</td>" + "<td>" + element.phone + "</td>" + "<td>" + element.email + "</td>";
										s += "<td>" + "<button id=edit" + element.id + ">" + "修改" + "</button>" + "<button id=delete" + element.id + ">" + "删除" + "</button>" + "</td>"
										s += "</tr>";
										$("#studentinformationtable").append(s);
										$("#edit" + element.id).click(function() {
											$("#frame").load("edit_user.html #edit-model", function() {
												$("#edit-user-id").val(element.id);
												$("#edit-user-email").val(element.email);
												$("#edit-user-username").val(element.name);
												$("#edit-user-password").val(element.password);
												$("#edit-user-phonenumber").val(element.phone);
												$("#submitedit").click(function() {
													$.ajax({
														type: "post",
														url: "edituser",
														data: $("#edit-user").serialize(),

													});
												})
											});

										});
										$("#delete" + element.id).click(function() {
											$.ajax({
												type: "post",
												url: "deleteuser",
												data: "id=" + element.id,
												success: function() {
													alert("删除成功！");
												}
											});
										});
									});

								}
							});
						});
						$("#student-add").click(function() {
							alert("点击学生增加");
							$("#studentinformationtable").load("adduser.html #add-user-window", function() {
								$("#submitadd").click(function() {
									$.ajax({
										type: "post",
										url: "addusermethod",
										data: $("#add-user").serialize(),
									});
								})
							})
						})
					});

				});

			});
		</script>
	</head>

	<body>
		<div class="container">
			<nav class="navbar navbar-inverse">
				<div class="navbar-header">
					<!--这个是导航栏 -->
					<a href="main.html" class="navbar-brand">课程管理系统</a>
				</div>
				<p class="navbar-text navbar-right" style="margin-right: 20px;">角色</p>
			</nav>
			<div class="row">
				<div class="col-md-2">
					<ul class="list-group menu">
						<li class="list-group-item" data-toggle="collapse" data-target="#kcgl" id="create-course">课程管理</li>
						<div id="kcgl" class="collapse">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="#nrfl" id="nrgl">内容分类</li>
						<div id="nrfl" class="collapse">
						</div>
						<li id="studengmanage" class="list-group-item" data-toggle="collapse" data-target="#xsgl">学生管理</li>
						<div id="xsgl" class="collapse">
							<ul class="list-group">
								<li class="list-group-item" id="xsda">学生档案</li>
							</ul>
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="#spgl">视频管理</li>
						<div id="spgl" class="collapse">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="#jsgl" id="create-role">角色管理</li>
						<div id="jsgl" class="collapse">
						</div>
						<li class="list-group-item" data-toggle="collapse" data-target="zlgl">资料管理</li>
					</ul>
				</div>
				<div class="col-md-10">
					<ol class="breadcrumb" id="path">
						<li>
							<a href="#" id="hom">Home</a>
						</li>
						<li>
							<a href="#" id="lib">Library</a>
						</li>
						<li>
							<a href="#" id="dat">Data</a>
						</li>
					</ol>
					<div id="frame">

					</div>

				</div>
			</div>
		</div>
	</body>

</html>